<template>
  <el-container style='height: auto'>
    <el-aside class='toolbar'>
      <el-menu style="width: 99%;border-right: 0;" v-for="(item,index) in topics" :key="index">
        <el-submenu :index="item.id">
          <template slot="title">
            <span class="titlefont">{{item.topictype}}</span>
          </template>
          <el-menu-item :index="item.id+'-1'" @click='addtopic(item.id)' class="titleitemfont">添加题目</el-menu-item>
          <el-menu-item :index="item.id+'-2'" @click='changefraction(item.id,item.topictype)' class="titleitemfont">修改分值
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <div class="tcardwidth" v-for="(item,index) in topicList" :key="index">
        <tcard :topiceinfo='item' @deltopice='deltopice'></tcard>
      </div>
      <component id="addedit" :is="edittoggle" @func='showtopic' :key="new Date().getTime()"></component>
    </el-main>
    <el-aside class='right-condition'>
      <examinfo :exampaperinfo='exampaperinfo'></examinfo>
    </el-aside>
  </el-container>
</template>

<script>
  import tcard from './topic/Topiccard.vue';
  import ehoiceedit from './edit/Ehoiceedit.vue';
  import multipleedit from './edit/Multipleedit.vue';
  import judgeedit from './edit/Judgeedit.vue';
  import examinfo from './topic/Examinfo.vue'
  export default {
    name: 'Toolbar',
    components: {
      ehoiceedit,
      judgeedit,
      multipleedit,
      tcard,
      examinfo
    },
    data() {
      return {
        topics: [{
          id: 0,
          topictype: '单选题'
        }, {
          id: 1,
          topictype: '多选题'
        }, {
          id: 2,
          topictype: '判断题'
        }],
        edittoggle: '',
        topicList: [], //题目列表
        exampaperinfo: {} //试卷信息

      }
    },
    mounted() {
      this.exampaperinfo = this.$route.query;
      this.gettestpaperbody();
      this.$store.watch((state, newpage) => {
      }, () => {
        this.changeCount++
      })
    },
    computed: {
      listData() {
        return this.$store.state.newpage
      }
    },
    watch: {
      listData(newVal, oldVal) {
        // 数据变化后，调用b组件内的函数
        this.gettestpaperbody()
      }
    },
    methods: {
      addtestpapertolist(list) {
        for (let i = 0; i < list.length; i++) {
          this.topicList.push(list[i]);
        }
        // console.log(this.topicList);
      },
      gettestpaperbody() {
        const testuuid = {
          'testUUId': this.exampaperinfo.testUuid
        };
        this.topicList = [];
        this.$getRequest({
          url: '/testPaper/adminGetTestPaperBody',
          params: testuuid
        }).then(res => {
          // console.log(res);
          if (res.code === 200) {
            console.log(res.data);
            this.addtestpapertolist(res.data.questionList)
          } else {
            this.$alert(res.msg, '提示', {
              confirmButtonText: '确定'
            })
          }
        })
      },
      deltopice(topiceid) {
        // console.log(topiceid)
        // this.$store.commit('changenewpage', 1)
        // this.gettestpaperbody()
        this.topicList = this.topicList.filter((data) => data.questionUuid !== topiceid);
      },
      showtopic(info) {
        let requestQuestion = {
          'testUuid': this.exampaperinfo.testUuid, //试卷uuid
          'serialNum': this.topicList.length + 1, //题目序号
          'questionTitle': info.name, // 题目名称
          'rightKey': info.questionType === 1 ? info.radio : [info.radio], //正确答案
          'questionType': info.questionType, // 题型
          'imgUrl': info.imgUrl, //图片地址
          'options': info.echoice
        };
        this.$postRequest({
          url: '/questionInfo/addQuestion',
          params: requestQuestion,
          isJson: 1
        }).then(res => {
          console.log(res.data);
          if (res.code === 200) {
            requestQuestion.questionUuid = res.data;
            this.topicList.push(requestQuestion);
            console.log(this.topicList);
            this.$message({
              type: 'success',
              message: '添加成功'
            });
            info.questionType === 0 ? this.exampaperinfo.singleNum++ :
              (info.questionType === 1 ? this.exampaperinfo.multipleNum++ : this.exampaperinfo.judgmentNum++);
          } else {
            this.$alert(res.msg[0], '提示', {
              confirmButtonText: '确定'
            })
          }
        })


        // console.log(this.topicList);
      },
      addtopic(topicid) {
        topicid === 0 ? this.edittoggle = 'ehoiceedit' : (topicid === 1 ? this.edittoggle = 'multipleedit' : this
          .edittoggle = 'judgeedit');
        this.anchor('#addedit');
      },
      changefraction(topicid, topictype) {
        let strtip = '请输入分值（此选项将修改所有对应题型的分值）';
        this.$prompt(strtip, '修改分值', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^(([1-9][0-9]|[1-9])(\.\d{1,2})?|0\.\d{1,2}|100)$/, //1-100正则
          inputErrorMessage: '请输入正确的分值'
        }).then(({
          value
        }) => {
          topicid === 0 ? this.exampaperinfo.singleScore = value : (topicid === 1 ? this.exampaperinfo.multipleScore =
            value : this.exampaperinfo.judgmentScore = value);
          const scoredata = {
            'questionType': topicid,
            'score': value,
            'testUUId': this.exampaperinfo.testUuid
          };
          this.$getRequest({
            url: '/testPaper/updateScore',
            params: scoredata
          }).then(res => {
            // console.log(res);
            if (res.code === 200) {
              console.log(res.data);
              this.$message({
                type: 'success',
                message: '修改成功,' + topictype + '的分数是: ' + value
              })
            } else {
              this.$alert(res.msg, '提示', {
                confirmButtonText: '确定'
              })
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      }
    }
  }
</script>

<style scoped>
  .toolbar {
    border-right: 0.0625rem solid #d8d8d8;
    background-color: #FFFFFF;
    width: 200px;
    height: auto;
    max-height: 90vh;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 50%;
  }

  .el-button+.el-button {
    margin-left: 0px;
  }

  .titlefont {
    font-size: 16px;
    font-weight: bold;
  }

  .titleitemfont {
    font-size: 13px;
  }

  #addedit {
    width: 80%;
    margin-left: 10%;
  }

  .tcardwidth {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 0.625rem;
  }

  .right-condition {
    /* border-left: 0.0625rem solid #d8d8d8; */
    background-color: #FFFFFF;
    /* width: 100px; */
    padding: 0.625rem;
    height: 40rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 50%;
  }
</style>
